<template>
<!-- logo和登录注册页面组件 -->
  <div>
    <div id="mengban" @click="closeEnroll()"></div>
    <!-- start -->
    <!-- 注册账号 -->
    <div id="enrollForm">
        <h1>注册轻简管账号</h1>
        <div class="content">
            <el-tabs type="card" :stretch="true">
                <!-- 注册：我要找工作 -->
                <el-tab-pane label="我要找工作">
                    <el-form :model="myform">
                        <el-input placeholder="请输入姓名" v-model="myform.myname"></el-input>
                        <el-input placeholder="请输入手机号" v-model="myform.myphone"></el-input>
                        <el-input placeholder="请输入邮箱账号" v-model="myform.myemail"></el-input>
                        <div class="getCode">
                            <el-input  v-model="myform.mycode" placeholder="请输入邮箱验证码"></el-input>
                            <el-button type="primary" @click="getCode1()">获取验证码</el-button>
                        </div>
                        <el-input placeholder="请输入密码" v-model="myform.mypassword" type="password"></el-input>
                        <el-button type="primary" id="personalEnroll" @click="persionalEnroll()">注册</el-button>
                        <a @click="loginPassage()">已有账号？点击登录</a>
                        
                    </el-form>
                </el-tab-pane>
                <!-- 注册：我要招员工 -->
                <el-tab-pane label="我要招员工">
                    <el-form :model="company">
                        <el-input placeholder="请输入公司名" v-model="company.cpname"></el-input>
                        <el-input placeholder="请输入公司类型" v-model="company.cptype"></el-input>
                        <el-input placeholder="请输入公司简介" v-model="company.cpinfo"></el-input>
                        <linkage 
                        v-on:listenProvince="showProvince"
                        v-on:listenCity="showCity"
                        v-on:listenRegion="showRegion"
                        ></linkage>

                        <el-input placeholder="请输入邮箱账号" v-model="company.cpemail"></el-input>
                        <div class="getCode">
                            <el-input placeholder="请输入邮箱验证码" v-model="company.cpcode"></el-input>
                            <el-button type="primary" @click="getCode2()">获取验证码</el-button>
                        </div>
                        <el-input placeholder="请输入密码" v-model="company.cppassword" type="password"></el-input>
                        <el-button type="primary" id="conpanyEnroll" @click="companyEnroll()">注册</el-button>
                        <a @click="loginPassage()">已有账号？点击登录</a>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <!-- 登录账号 -->
    <div id="loginForm">
        <h1>轻简管</h1>
        <div class="content">
            <el-tabs type="card" :stretch="true">
                <!-- 登录：我要找工作 -->
                <el-tab-pane label="个人登录">
                    <el-form :model="mylogin">
                        <el-input placeholder="请输入手机号码" v-model="mylogin.loginPhone"></el-input>
                        <el-input placeholder="请输入密码" v-model="mylogin.ploginPassword" type="password"></el-input>
                        <el-button type="primary" id="personalLogin" @click="persionalLogin()">登录</el-button>
                        <a @click="enroll()">没有账号？立即注册</a>
                    </el-form>
                </el-tab-pane>
                <!-- 登录：我要招员工 -->
                <el-tab-pane label="企业登录">
                    <el-form :model="companylogin">
                        <el-input placeholder="请输入邮箱账号" v-model="companylogin.loginEmail"></el-input>
                        <el-input placeholder="请输入密码" v-model="companylogin.cloginPassword" type="password"></el-input>
                        <el-button type="primary" id="conpanyLogin" @click="companyLogin()">登录</el-button>
                        <a @click="enroll()">没有账号？立即注册</a>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
     <!-- end -->
    <el-header>
        <router-link to="/"><img :src="logoSrc" class="logo"></router-link>
        <div class="right">
             <router-link to="/MyTeam" class="team" active-class="active">Team</router-link>
             <router-link to="/MyAbout" class="about" active-class="active">About</router-link>
             <el-button class="enroll" @click="enroll()">免费注册</el-button>
        </div>
    </el-header> 
 </div>
</template>


<style lang="less" scoped>
body{position: relative;}
.el-header{
    font-family: oswald;
    display: block;
    position: absolute;
    top: 0;
    z-index: 200;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    img{
        color: #fff;
        margin-left: 100px;
        margin-top: 50px;
        width: 134px;
        height: 44px;
    }
   .right{
        line-height: 60px;
        color: #fff;
        .enroll,.team,.about{
            width: 190px;
            height: 60px;
            font-size: 28px;
            font-weight: 800;
        }
        .team{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .about{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .enroll{
            font-family: oswald;
            margin: 50px 100px;
            color: #fff;
            // background-color: #383838;
            background-image: linear-gradient(#7a7878, #070707);
            border: none;
            border-radius: 5px;
        }
        .enroll:active{
            color: rgb(133, 133, 133);
        }
        .team,.about{
            padding: 10px 40px;
            color: #000;
            margin: 50px 1px;
            background-color: #fff;
            opacity: 0.7;
            border: none;
            text-decoration: none;
        }
        .active{
                background-color: #c2c5ca;
           }
    }
}
@font-face{
            font-family: 'oswald';
            src : url('../assets/方正粗黑宋简体.TTF');
            //引用外部字体
        }
#mengban{
    width: 100%;
    height: calc(100vh);
    position: absolute;
    top: 0;
    background-color: #070707;
    opacity: 0.3;
    z-index: 300;
    display: none;
}

.getCode{
    display: flex;
    justify-content: space-between;
    .el-input,.el-button{
        width: 49%;
        height: 38px;
    }
    .el-button{
        margin-top: 6px;
        background-color: #fff;
        border: none;
        border: 1px solid #e2e2e2;
        border-left: none;
        color: #8a8787;
    }
    .el-button:active{
        // background-color: #8a8787;
        color: #1840f0;
    }
}
</style>

<style lang="less">
#enrollForm,#loginForm{
    border-radius: 5px;
    // box-shadow: 3px 3px 1px #838383;
    display: none;
    font-family: oswald;
    position:absolute;
    width: 27%;
    top: 70px;
    padding: 10px;
    right: 36.5%;
    background-color: #fff;
    z-index: 310;
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
    h1{
         margin-top: 20px;
         text-align: center;
         color: #565656;
         font-size: 2rem;
         opacity: 0.9;
         letter-spacing: 3px;
    }
    .content{
        width: 80%;
        margin: 0 auto;
        font-size: 1.5rem;
        a{
            font-size: 1rem;
            text-decoration: none;
            cursor:pointer;
            opacity: 0.7;
        }
        a:active{
            color: rgb(8, 26, 104);
            opacity: 1;
        }
    }
    .el-tabs__item{
        font-size: 1rem;
        padding: 5px;
        height: 50px;
        font-weight: 500;
        color: #585858;
        opacity: 0.8;
    }
    .el-tabs__item.is-active{
        opacity: 1;
        border-top: #000 2px solid;
    }
    .el-input{
        margin: 5px auto;
    }
    #personalEnroll,#conpanyEnroll,#conpanyLogin,#personalLogin{
      width: 100%;
      margin: 5px auto;
      background-image: linear-gradient(#7a7878, #5a5a5a);
    //   background-color: #7a7878;
      border: none;
    }
}  
</style>
<script>
import linkage from '@/components/linkage'
export default {
    components:{
       linkage
    },
    name:"Logo",
    props: {
         logoSrc: String,
         required: true
    },
    data(){
        return{
            myform:{
                myname:'',
                myphone:'',
                myemail:'',
                mycode:'',
                mypassword:''
            },
            company:{
                cpname:'',
                cptype:'',
                cpinfo:'',
                province:'',
                city:'',
                region:'',
                cpemail:'',
                cpcode:'',
                cppassword:''
            },
            mylogin:{
                loginPhone:'',
                ploginPassword:''
            },
            companylogin:{
                loginEmail:'',
                cloginPassword:''
            },
            Threelevellinkage:'../assets/city_code.json',
            token:'',
        }
    },
    methods:{
        //登录注册页面切换
        enroll(){
            document.getElementById("enrollForm").style.display = "block";
            document.getElementById("mengban").style.display = "block";
            document.getElementById("loginForm").style.display = "none"
        },
        closeEnroll(){
            document.getElementById("enrollForm").style.display = "none";
            document.getElementById("mengban").style.display = "none";
            document.getElementById("loginForm").style.display = "none"
        },
        loginPassage(){
            document.getElementById("enrollForm").style.display = "none";
            // document.getElementById("mengban").style.display = "block";
            document.getElementById("loginForm").style.display = "block"
        },
        //获取验证码(个人)
        getCode1(){
            let myemail = this.myform.myemail;
            console.log(myemail);
            if(myemail){
                depot.post({
                url: 'empservice/jobSeeker/send',
                data: {
                     "email": myemail
                },
                cb: (res)=> {
                    console.log(res)
                    alert("正在发送验证码！")
                }
                })
           }
        },
        //获取验证码(企业)
        getCode2(){
            let cpemail = this.company.cpemail;
            console.log(cpemail);
            if(cpemail){
                depot.post({
                url: 'empservice/jobSeeker/send',
                data: {
                     "email": cpemail
                },
                cb: (res)=> {
                    console.log(res)
                    alert("正在发送验证码！")
                }
                })
           }
        },
        //注册账号(人才)
        persionalEnroll(){
           var myform = this.myform
           console.log(myform.myname);
            depot.post({
                url: 'empservice/jobSeeker/register',
                data: {
                    "code":myform.mycode,
                    "email": myform.myemail,
                    "password": myform.mypassword,
                    "phoneNumber": myform.myphone,
                    "username":myform.myname
                },
                cb: (res)=> {
                    console.log("注册账号：");
                    console.log(res);
                    // alert(res.message);
                    if(res.code==20000){
                        alert("注册成功")
                        document.getElementById("enrollForm").style.display = "none";
                        document.getElementById("loginForm").style.display = "block";
                    }else if(res.code == 20001){
                        alert(res.message)
                    }
                }
                })
        },
        //登录账号(人才)
        persionalLogin(){
           var mylogin = this.mylogin
           console.log(mylogin.loginPhone);
           depot.post({
                url: 'empservice/jobSeeker/login',
                data: {
                    "phoneNumber": mylogin.loginPhone,
                    "password":mylogin.ploginPassword
                },
                cb: (res)=> {
                    console.log("登录账号：");
                    console.log(res);
                    // alert(res.message);
                    this.token1 = res.data.token;
                    localStorage.setItem("token",this.token1);
                    if(res.code==20000){
                        alert("登录成功")
                        this.$router.push("/Personal")     
                    }else if(res.code == 20001){
                        alert(res.message)
                    }
                }
                })
        },
        //组件传值（子传父）
        showProvince(data){
          this.company.province = data;
          console.log("省份：",this.company.province);
        },
        showCity(data){
            this.company.city = data;
            console.log("城市：",this.company.city);
        },
        showRegion(data){
            this.company.region =data;
            console.log("县区：",this.company.region);
        },
        //注册账号(公司)
        companyEnroll(){
           var company = this.company;
            depot.post({
                url: 'empservice/company/register',
                data: {
                    'companyname':company.cpname,
                    'type':company.cptype,
                    'comment':company.cpinfo,
                    'province':company.province,
                    'city':company.city,
                    'region':company.region,
                    'email':company.cpemail,
                    'code':company.cpcode,
                    'password':company.cppassword
                },
                cb: (res)=> {
                    console.log("注册账号：");
                    console.log(res);
                    // alert(res.message);
                    if(res.code==20000){
                        alert("注册成功")
                        document.getElementById("enrollForm").style.display = "none";
                        document.getElementById("loginForm").style.display = "block";
                    }else if(res.code == 20001){
                        alert(res.message)
                    }
                    
                }
                })
        },
        //登录账号(公司)
        companyLogin(){
            console.log("————————————————————");
           var companylogin = this.companylogin
           console.log(companylogin);
           depot.post({
                url: 'empservice/company/login',
                data: {
                    'email':companylogin.loginEmail,
                    'password':companylogin.cloginPassword
                },
                cb: (res)=> {
                    console.log("登录账号：");
                    console.log(res);
                    console.log("企业token:",res.data.token);
                    this.token = res.data.token;
                    localStorage.setItem("token",this.token);
                    if(res.code==20000){
                         alert("登录成功")
                    this.$router.push("/Company")       
                    }else if(res.code == 20001){
                        alert(res.message)
                    }
                }
                })
        },
    }
}
</script>